<template>
    <div id="pay">
        <ul class="pay">
            <li>
                <div class="col-xs-6 pay_t">
                    订单金额
                </div>
                <div class="col-xs-6 pay_m">
                    ¥&nbsp;{{total}}
                </div>
            </li>
            <li>
                <div class="col-xs-6">
                    <img src="../../common/image/officer/wxpay.png" class="pay_img">
                    <span>微信支付</span>
                </div>
                <div class="col-xs-6">
                    <img class="rightpay" src="../../common/image/officer/rightpay.png">
                </div>
            </li>
            <!--<li>-->
                <!--<div class="col-xs-6">-->
                    <!--<img src="../../common/image/officer/zfbpay.png" class="pay_img">-->
                    <!--<span>支付宝支付</span>-->
                <!--</div>-->
                <!--<div class="col-xs-6">-->
                    <!--<img class="rightpay" src="../../common/image/officer/rightpay.png">-->
                <!--</div>-->
            <!--</li>-->
            <!--<li>-->
                <!--<div class="col-xs-6">-->
                    <!--<img src="../../common/image/officer/unionpay.png" class="pay_img">-->
                    <!--<span>转账汇款</span>-->
                <!--</div>-->
                <!--<div class="col-xs-6">-->
                    <!--<img class="rightpay" src="../../common/image/officer/rightpay.png">-->
                <!--</div>-->
            <!--</li>-->
            <!--<li>-->
                <!--<div class="col-xs-6">-->
                    <!--<img src="../../common/image/officer/scenepay.png" class="pay_img">-->
                    <!--<span>现场缴费</span>-->
                <!--</div>-->
                <!--<div class="col-xs-6">-->
                    <!--<img class="rightpay" src="../../common/image/officer/rightpay.png">-->
                <!--</div>-->
            <!--</li>-->
        </ul>
    </div>
</template>

<script>
    export default {
        name: "pay",
        data(){
            return{
                total:this.$route.params.total,
            }
        },
        beforeCreate(){
            // console.log('beforeCreate:刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳')
            // console.log(this.msg)//undefined
            // console.log(document.getElementsByClassName("myp")[0])//undefined
        },
        created(){
            console.log(this.$route.params.base_num)
            // console.log('created:这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数')
            // this.msg+='!!!'
            // console.log('在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
            // console.log('接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染')
        },
        beforeMount(){
            // console.log('beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated')
            // this.msg+='@@@@'
            // console.log('在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
            // console.log(document.getElementsByClassName("myp")[0])//undefined
            // console.log('接下来开始render，渲染出真实dom')
        },
        // render:function(createElement){
        //     console.log('render')
        //     return createElement('div','hahaha')
        // },
        mounted(){
            // console.log('mounted：此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了')
            // console.log(document.getElementsByClassName("myp")[0])
            // console.log('可以在这里操作真实dom等事情...')
            //  let officer_li = document.getElementsByClassName('officer-li');
            // officer_li.onclick(function() {
            //   for (let i = 0; i<officer_li.length; i++) {
            //    console.log(11)
            //   }
            // })

            //    this.$options.timer = setInterval(function () {
            //        console.log('setInterval')
            //         this.msg+='!'
            //    }.bind(this),500)
        },
        methods: {

        },
        watch:{

        },
        beforeUpdate:function(){
            //这里不能更改数据，否则会陷入死循环
            // console.log('beforeUpdate:重新渲染之前触发')
            // console.log('然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染')
        },
        updated:function(){
            //这里不能更改数据，否则会陷入死循环
            // console.log('updated:数据已经更改完成，dom也重新render完成')
        },
        beforeDestroy:function(){
            // console.log('beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等...')
            // clearInterval(this.$options.timer)
        },
        destroyed:function(){
            // console.log('destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳，这里也可以善后')
        }
    }
</script>

<style lang="scss" scoped>
    *{
        font-size: 26px;
    }
    #pay{
        padding:0 20px;
        .pay{
            li{
                color: #4B4B4B;
                border-bottom: 1px solid #D7D7D7; /*no*/
                overflow: hidden;
                clear: none;
                .col-xs-6{
                    float: left;
                    width: 50%;
                    height: 80px;
                    line-height: 80px;
                }
                .pay_t{
                    font-weight: 700;
                }
                .pay_m{
                    color: #996600;
                    text-align: right;
                    font-weight: 700;
                }
                .pay_img{
                    width: 48px;
                    height: 48px;
                    vertical-align: sub;
                    margin-right: 20px;
                }
                span{
                    font-size: 28px;
                    vertical-align: super;
                }
                .rightpay{
                    float: right;
                    height: 40px;
                    margin-top: 20px;
                }
            }
        }
    }
</style>
